<template>
	<view id="app">
		<!-- 星际网咖预约系统 -->
	</view>
</template>

<script setup>
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
import { useUserStore } from '@/stores/user'
import { useSeatStore } from '@/stores/seat'
import { useOrderStore } from '@/stores/order'

const userStore = useUserStore()
const seatStore = useSeatStore()
const orderStore = useOrderStore()

onLaunch(() => {
	console.log('星际网咖App启动')
	initApp()
})

onShow(() => {
	console.log('App Show')
	// 应用显示时刷新数据
	if (userStore.isLoggedIn) {
		refreshAppData()
	}
})

onHide(() => {
	console.log('App Hide')
})

// 应用初始化
const initApp = () => {
	// 检查登录状态
	userStore.checkLoginStatus()
	
	// 初始化座位数据
	seatStore.initMockSeats()
	
	// 初始化订单数据
	if (userStore.isLoggedIn) {
		orderStore.initMockOrders()
	}
	
	// 获取系统信息
	uni.getSystemInfo({
		success: (res) => {
			console.log('系统信息:', res)
			// 设置状态栏高度等系统信息
			uni.setStorageSync('systemInfo', res)
		}
	})
	
	// 设置网络状态监听
	uni.onNetworkStatusChange((res) => {
		console.log('网络状态变化:', res)
		if (!res.isConnected) {
			uni.showToast({
				title: '网络连接异常',
				icon: 'none'
			})
		}
	})
}

// 刷新应用数据
const refreshAppData = () => {
	// 刷新座位状态
	seatStore.refreshSeats()
	
	// 刷新订单状态
	orderStore.fetchOrders()
}
</script>

<style lang="scss">
/* 全局样式 */
@import '@/styles/common.scss';

#app {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* 页面基础样式 */
page {
	background-color: #f5f5f5;
	font-size: 16px;
	line-height: 1.6;
	color: #1d1d1f;
}

/* 安全区域适配 */
.safe-area-inset-top {
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
}

.safe-area-inset-bottom {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

/* 通用容器 */
.container {
	padding: 0 16px;
}

/* 文字颜色 */
.text-primary { color: #1d1d1f; }
.text-secondary { color: #86868b; }
.text-tertiary { color: #c7c7cc; }
.text-brand { color: #007aff; }
.text-success { color: #34c759; }
.text-warning { color: #ff9500; }
.text-error { color: #ff3b30; }

/* 背景颜色 */
.bg-white { background-color: #ffffff; }
.bg-gray { background-color: #f5f5f5; }
.bg-brand { background-color: #007aff; }

/* 布局 */
.flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }
.flex-1 { flex: 1; }

/* 间距 */
.m-0 { margin: 0; }
.m-1 { margin: 8px; }
.m-2 { margin: 16px; }
.m-3 { margin: 24px; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.p-0 { padding: 0; }
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }

/* 圆角 */
.rounded-sm { border-radius: 4px; }
.rounded { border-radius: 8px; }
.rounded-lg { border-radius: 12px; }
.rounded-xl { border-radius: 16px; }

/* 阴影 */
.shadow-sm { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.shadow { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.shadow-lg { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }

/* 按钮基础样式 */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s ease;
	user-select: none;
	
	&:active {
		transform: scale(0.98);
	}
	
	&.btn-primary {
		background: #007aff;
		color: white;
		box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
		
		&:disabled {
			background: #c7c7cc;
			box-shadow: none;
		}
	}
	
	&.btn-secondary {
		background: transparent;
		color: #007aff;
		border: 1px solid #007aff;
	}
	
	&.btn-small {
		padding: 8px 16px;
		font-size: 14px;
		border-radius: 6px;
	}
	
	&.btn-block {
		width: 100%;
	}
}

/* 卡片样式 */
.card {
	background: white;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	
	&.card-padding {
		padding: 16px;
	}
}

/* 输入框样式 */
.input {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #f2f2f7;
	border-radius: 8px;
	font-size: 16px;
	background: white;
	transition: all 0.3s ease;
	
	&:focus {
		outline: none;
		border-color: #007aff;
		box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
	}
	
	&::placeholder {
		color: #c7c7cc;
	}
}

/* 标签样式 */
.tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 500;
	
	&.tag-primary {
		background: rgba(0, 122, 255, 0.1);
		color: #007aff;
	}
	
	&.tag-success {
		background: rgba(52, 199, 89, 0.1);
		color: #34c759;
	}
	
	&.tag-warning {
		background: rgba(255, 149, 0, 0.1);
		color: #ff9500;
	}
	
	&.tag-error {
		background: rgba(255, 59, 48, 0.1);
		color: #ff3b30;
	}
}

/* 加载状态 */
.loading {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid #f2f2f7;
	border-top-color: #007aff;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	text-align: center;
	
	.empty-icon {
		font-size: 64px;
		color: #c7c7cc;
		margin-bottom: 16px;
	}
	
	.empty-title {
		font-size: 18px;
		font-weight: 600;
		color: #1d1d1f;
		margin-bottom: 8px;
	}
	
	.empty-desc {
		font-size: 14px;
		color: #86868b;
		line-height: 1.5;
		margin-bottom: 24px;
	}
}
</style>
